<template>
	<div>
		<!-- 搜索框 -->
		<div style="margin: 12px;">
			<input type="text" class="search" placeholder="搜索">
		</div>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			style="height: 230px;" >
			<block v-for="(item,index) in aa" :key="item.id">
				<swiper-item>
					<image :src="item.url" mode="" style="width: 750rpx;"></image>
				</swiper-item>
			</block>
		</swiper>
		<!--  -->
		<view class="x" style="flex-wrap: wrap;">
			<view style="width: 20vw;align-items: center;justify-content: center;" class="y" v-for="item in num" @click="lanz(item.name)">
				<image style="width: 20px;height: 20px;margin-bottom: 16px;margin: 12px;" :src="item.iconUrl"></image>
				<view>{{item.name}}</view>
			</view>
		</view>
		<!-- 喇叭 -->
		<view class="index_Notice">
			<view class="index_Notice_title">换季时报</view>
			<view class="index_Notice_text">
				<text id="mjltesta">全场5折！！！！！！！！！</text>
			</view>
		</view>
		<!-- 优惠劵 -->
		<div style="margin-top: 15px;">
			<view style="margin: 16px;" @click="hauang">优惠劵</view>
			<div v-for="(ee,index) in Data" :key="ee.id" style="border: 1px solid #ff0000;margin: 12px;height: 80px;">
				<div style="display: flex;">
					<view style="font-size: 24px;color: red;margin: 12px 20px 0 12px;">{{ee.discount}}元</view>
					<span style="margin: 20px 25px 0 12px;">{{ee.name}}</span>
				</div>
				<view style="color: #969799;font-size: 12px;margin-left: 15px;">{{ee.desc}}-{{ee.tag}}:{{ee.days}}
				</view>
			</div>
		</div>
		<!-- 团购 -->
		<div style="display: flex;margin: 12px;display: flex;justify-content: space-between;">
			<view>团购专区</view>
			<view class="">
				<span style="color: #999999;font-size: 12px;">更加团购商品></span>
			</view>
		</div>
		<view class="y" style="">
			<view class="x" v-for="item in tata">
				<image style="width: 88px;height: 88px;margin: 12px;" :src="item.picUrl"></image>
				<view class="y">
					<view>{{item.name}}</view>
					<view style="font-size: 14px;color: #646566;margin-top: 7px;">{{item.brief}}</view>
					<view style="font-size: 13px;margin-top: 12px;">￥{{item.grouponPrice}}</view>
				</view>
			</view>
		</view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				num: [],
				Data: [],
				tata: [],
				aa: [],
			}
		},
		onLoad() {
			uni.request({
				url: 'http://47.91.230.137:8086/wx/home/index', //仅为示例，并非真实接口地址。
					
				success: (res) => {
					// console.log(res)
					this.aa = res.data.data.banner
					this.num = res.data.data.channel
					this.Data = res.data.data.couponList
					this.tata = res.data.data.grouponList
				}
			});
		},
		methods: {
			hauang(){
				uni.navigateTo({
					url:'/pages/shu/shu'
				})
			},
			lanz(name){
				uni.navigateTo({
					url:'/pages/ruabz/ruabz?id='+name
				})
			}
		}
	}
</script>

<style>
	.x {
		display: flex;
		flex-direction: row;
	}

	.y {
		display: flex;
		flex-direction: column;
	}

	.search {
		height: 36px;
		border-radius: 18px;
		border: 1px solid #ccc;
		padding-left: 20px;
		background-color: #fff;
	}
	.index_Notice {
		width: 100%;
		box-sizing: border-box;
		padding: 10px;
		display: flex;
		margin-top: 12px;
	}
	
	.index_Notice_title {
		display: inline-block;
		border-radius: 3px;
		color: #ffaa00;
		/* background:red; */
		padding: 0px 5px;
		font-size: 14px;
		height: 20px;
		/* width:80px; */
	}
	
	.index_Notice_text {
		color: #000000;
		font-size: 14px;
		margin-left: 5px;
		height: 20px;
		overflow: hidden;
		white-space: nowrap;
	}
	
	.index_Notice_text text {
		white-space: nowrap;
		animation: 20s loop linear infinite normal;
		display: inline-block;
		vertical-align: top;
	}
	
	@keyframes loop {
		0% {
			transform: translateX(350px);
			-webkit-transform: translateX(350px);
		}
	
		100% {
			transform: translateX(-100%);
			-webkit-transform: translateX(-100%);
		}
	}
	
	@-webkit-keyframes loop {
		0% {
			transform: translateX(300px);
			-webkit-transform: translateX(300px);
		}
	
		100% {
			transform: translateX(-100%);
			-webkit-transform: translateX(-100%);
		}
	}
</style>